import Vue from 'vue'
import Router from 'vue-router'
import About from '../components/about'
import Home from  '../components/home'
import News from '../components/news'
import Messages from '../components/messages'
import MessageDetail from '../components/message-detail'

Vue.use(Router)
/*
* 路由器模块:
*  Router:用于创建路由器的构造函数：
*  routes：是一个数组，数组中是对象{}
*
*  总结：编写使用路由需要3步：
     1>定义路由组件
     2>在index.js中引入模块：如：import About from '../views/About'
     3>在index.js中注册路由：如：{path: '/about, component: About}
     4>使用路由：<router-link>  <router-view>
* */
export default new Router({
  //可以配置多个路由,没有先后顺序，可以注册n个路由
  routes: [
    //注册About路由
    {
      path: '/about',
      name: 'About',
      component: About
    },
    //注册Home路由
    {
      path: '/home',
      name: 'Home',
      component: Home,
      //home下的子路由news messages
      children: [
        {
          path: '/home/news',
          component: News
        },
        {
          path: '/home/messages',
          component: Messages,
          //子路由,动态路由
          children: [
            {
              path: '/home/messages/:id',
              component: MessageDetail
            }
          ]
        },
        //重定向，默认选中news
        {
          path: '',
          redirect: '/home/news'
        }
      ],

    },
    //重定向，默认选中About
    {
      path: '/',
      redirect: '/about'
    }
  ]
})
